<template>
  <div class="patient-order-container">
    <!-- 导航栏开始 -->
    <!-- <div class="header">
      <el-header>
        <div class="header-left">
          <div class="header-left-name">个人订单</div>
        </div>
      </el-header>
    </div> -->
    <div v-for="list in orderList" :key="list.id" class="list-group-outer">
      <div class="list-group">
        <li class="list-group-item">
          <h6 class="list-group-item-heading">预约时间：{{ formaterTime(list.time) }}</h6>
          <span
            :class="
              list.status == 0
                ? 'list-group-item-span-primary'
                : list.status == 1
                ? 'list-group-item-span-cancel'
                : 'list-group-item[-span-end'
            "
            >{{
              list.status == 0
                ? "已预约"
                : list.status == 1
                ? "已取消"
                : "已结束"
            }}</span
          >
        </li>
        <li class="list-group-item">
          <div style="width: 100%">
            <div class="patient-order-container-list">
              <div class="block">
                <el-image :src="list.doctor.image">
                  <div slot="placeholder" class="image-slot">
                    加载中<span class="dot">...</span>
                  </div>
                </el-image>
                <div class="center">
                  <h3>{{ list.doctor.name }}</h3>
                  <div class="description">{{ list.doctor.description }}</div>
                  <div class="have-paid"></div>
                </div>
              </div>
              <div class="medicine-list">
                <el-link
                  type="primary"
                  :underline="false"
                  @click="cancelOrderJudge(list)"
                  :disabled="list.status != 0"
                  :style="list.status != 0?'color:#cccccc':''"
                  >取消预约</el-link
                >
                <el-popover placement="right" width="400" trigger="click">
                  <el-table v-if="medicineList && medicineList.length > 0" :data="medicineList">
                    <el-table-column property="image"
                    align="center"
                         label="图片"
                         width="150">
          <template slot-scope="scope">
            <img class="medicine-list-image"
                 :src="scope.row.image"
                 alt="药品图片"
                 srcset="">
          </template>
        </el-table-column>
                    <el-table-column
                      width="100"
                      property="name"
                      label="药品名"
                      align="center"
                    ></el-table-column>
                    <el-table-column
                      width="500"
                      property="description"
                      align="center"
                      label="介绍"
                    ></el-table-column>
                  </el-table>
                  <el-empty v-else description="暂无药品推荐" :image-size = '50'></el-empty>
                  <el-link :underline="false" slot="reference"
                    @click="getMedicineListData(list.id)">查看推荐药品</el-link
                  >
                </el-popover>
              </div>
            </div>
          </div>
        </li>
      </div>
    </div>
  </div>
</template>

<script>
import {parseTime} from "@/utils/index"
import { getUserOrderList, cancelOrder, getMedicineList} from "@/api/user.js";
import { getToken } from "@/utils/auth";
export default {
  name: "PatientOrder",
  data() {
    return {
      src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
      orderList: null,
      medicineList:null
    };
  },
  mounted() {
    this.handleGetUserOrder();
  },
  methods: {
    cancelOrderJudge(list) {
      const time = new Date();
      const year = time.getFullYear();
      const month = time.getMonth();
      const day = time.getDate();
      const orderTime = new Date(list.time);
      if (
        year == orderTime.getFullYear() &&
        month == orderTime.getMonth() &&
        orderTime.getDate() == day
      ) {
        this.$message.error("当前订单不可取消预约");
        return;
      }
      console.log(list.id)
      this.handleCancelOrder(list.id);
      console.log("cancel");
    },
    async handleCancelOrder(orderId) {
      this.$confirm("此操作将取消该预约, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let {code} = await cancelOrder({id:orderId,status:1});
          console.log(code);

          if(code == 200){
            this.$message({
            type: "success",
            message: "取消成功!",
          });
          }
          this.handleGetUserOrder()
        })
        .catch((e) => {
          console.log(e);
        });
    },
    async handleGetUserOrder() {
      const uid = getToken("token")
      let {data} = await getUserOrderList(uid);
      console.log(data, "data");
      if (data) {
        this.orderList = data;
      }
    },
    async getMedicineListData(id){
      let {data} = await getMedicineList(id)
      console.log(data)
      if(data){
        this.medicineList = data
      }
      // console.log('获取推荐药品')
    },
    formaterTime(time){
    return parseTime(time)
  },
  },
  // watch: {
  //   orderList: {
  //     deep: true,
  //     handler(newV, oldV) {
  //       this.val = newV
  //       this.oldVal = oldV
  //     },
  //   },
  // },
};
</script>

<style lang="scss">
.patient-order-container {
  background-image: url("@/assets/images/order.jpg");
  background-size: cover;
  
  a {
    text-align: none;
  }
  .header {
    height: 3rem;

    display: flex;
    align-items: center;
    width: 100%;
    font-size: 1.5rem;
    .el-header {
      background-color: white;
      width: 100%;
      border-bottom: 1px solid #cccccc;
      display: flex;
      align-items: center;
      position: fixed;
      height: 3rem;
      font-size: 1.5rem;
      z-index: 9;
    }
  }
  &-header {
    height: 5rem;
    margin-bottom: 2rem;
    color: #409eff !important;
    .el-page-header__content {
      color: #409eff;
      font-size: 1.3rem;
    }
    // background-color: #f8f9fa;
    .box {
      padding: 1rem;
      height: 4rem;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #cccccc;
      align-items: center;
      margin: 0;
      width: 100%;
      position: fixed;
      transform: translateZ(2.5rem);
      z-index: 9999;
      background-color: white;
    }
  }
  .list-group {
    background-color: #f8f9fa;
    margin: 1.5rem;
    width: 90%;

    .list-group-item {
      background-color: #f8f9fa;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #cccccc;
      margin-bottom: 0;
    }

    .el-image {
      margin: 1rem;
      width: 10rem;
      height: 10rem;
    }
    .patient-order-container-list {
      flex: 4;
      width: 100%;
      display: flex;
      justify-content: space-between;
      .block {
        display: flex;
        width: 70%;
      }
      .center {
        width: 100%;
        margin-left: 3rem;
        h3 {
          font-weight: 400;
        }
        .description {
          font-size: 0.8rem;
          margin: 2rem 0 1rem 0.5rem;
          height: 6rem;
        }
        .time-menzhen {
          font-size: 0.5rem;
        }
      }
    }
  }
  .list-group-item-span {
    &-primary {
      color: #97a10c;
    }
    &-end {
      color: #cccccc;
    }
    &-cancel {
      color: red;
    }
  }
  .have-paid {
    font-size: 0.8rem;
    color: grey;
    .price {
      margin: 1rem;
      color: red;
    }
  }
  .cancel {
    display: flex;
    justify-content: right;
    color: #409eff;
  }
  .el-popover {
    button {
      margin-top: 50%;
    }
  }
  .medicine-list {
    .el-link {
      margin-top: 5rem;
      margin-right: 1rem;
    }
    .el-link.el-link--primary {
      color: #409eff;
    }
  }
  .list-group-outer {
    display: flex;
    justify-content: center;
  }
}

.medicine-list-image{
  width: 100px;
}
</style>
